<template>
  <div class="screen-list">
    <simple-chart :options="options" v-if="options"/>
  </div>
</template>
<script>
import simpleChart from '@/components/job/simple-chart'

export default {
  name: 'screen-list',
  cnName: '列表',
  components: {
    simpleChart
  },
  props: {
    data: Object,
    yAxisTitle: String,
    legendLeft: {
      type: String,
      default: 'center'
    }
  },
  data() {
    return {
      options: null
    }
  },
  methods: {
    init() {
      const {类型, 列表, 颜色} = this.data

      const series = []
      类型.forEach((o, index) => {
        const color = 颜色[index % 颜色.length]
        series.push({
          type: 'bar',
          label: {
            show: false
          },
          itemStyle: {
            color: color
          }
        })
      })

      this.options = {
        grid: {
          left: 30,
          right: 20,
          bottom: 60,
          top: 30
        },
        legend: {
          icon: 'circle',
          textStyle: {
            color: '#FFF',
            fontSize: 12
          },
          left: this.legendLeft,
          itemWidth: 10,
          itemHeight: 10
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        dataset: {
          source: [
            ['', ...类型],
            ...列表
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#FFF',
            rotate: 30,
            fontSize: 12
          }
        },
        yAxis: {
          name: this.yAxisTitle,
          nameTextStyle: {
            color: '#FFF'
          },
          axisLabel: {
            color: '#FFF',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#05b0c3'
            }
          }
        },
        series: series
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.screen-list {
  position: relative;
  height: 100%;
}
</style>
